﻿
<%@ page import="org.product.Product" %>
<%@ page import="org.product.ProductType" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'product.label', default: 'Product')}" />
		<title>产品查询</title>
		<script type="text/javascript" src="${resource(dir: 'js/dataTables-1.5/js', file: 'jquery.dataTables.js')}" ></script>
		<script type="text/javascript">
	        var focusQueryInput = function() {
	            document.getElementById("qProduct").focus();
	        }
	        function getProducts(typeId){
	        	showSpinner(true);
		        var url = '<g:createLink controller="product" action="listByType" />';
	        	$.ajax({
	        		   type: "GET",
	        		   url: url,
	        		   data: "productTypeId="+typeId,
	        		   success: function(data){
	        		     $("#list-product").html(data);
	        		   }
	        		});
	        	showSpinner(false);
		    }
	        function searchProducts(){
	        	showSpinner(true);
		        var url = '<g:createLink controller="product" action="search" />';
		        var qValue = $("#qProduct").val();
		        if(qValue.length==0){
					return false;
			    }
	        	$.ajax({
	        		   type: "POST",
	        		   url: url,
	        		   data: "qProduct="+qValue,
	        		   success: function(data){
	        		     $("#list-product").html(data);
	        		   }
	        		});
	        	showSpinner(false);
		    }
	        $(document).ready(function() {
				$('#product-type').dataTable( {
					"oLanguage": {
						"sSearch": ""
					},
					"bPaginate": true,
					"bLengthChange": false,
					"bFilter": true,
					"bSort": true,
					"bInfo": true,
					"bAutoWidth": true,sPaginationType:'two_button',iDisplayLength:15} );
				
				//$("#btnSearch").click(function(event){
					//searchProducts();
				//})
			} );
    	</script>
	</head>
	<body onload="focusQueryInput();">
		<a href="#list-product" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		
		<div id="main-content" style="min-height:500px;">
			<div id="left-content" style="float:left;width:200px;heigth:100%;padding-left:10px;">
				<table id="product-type">
					<thead>
						<tr>
							<th>sort</th><th>productType</th>
						</tr>
					</thead>
					<g:each in="${ProductType.list()}" status="i" var="productTypeInstance">
						<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
							<td>${fieldValue(bean: productTypeInstance, field: "sort")}</td>
							<td>
								<a href="javascript:void(0);" onclick='getProducts(${productTypeInstance.id})' >
									${fieldValue(bean: productTypeInstance, field: "typeName")}
									</a>
							</td>
						</tr>
					</g:each>
				</table>
			</div>
			<div id="right-content" style="float:right;width:760px;heigth:100%;">
				<div style="height:25px;margin:0 20px 5px 10px;">
					<g:formRemote name="searchForm" update="list-product" url="[ controller: 'product', action:'search' ]">
	      				<input name="q" id="qProduct"value="${params.q}" size="80"/>
	      				<input type="submit" value="Search" id="btnSearch"/>
	      			</g:formRemote>
				</div>
				<div id="list-product" class="content scaffold-list" role="main">
					<g:render template="/product/search"/>
				<div>
			</div>
			<div class="clear"></div>
        </div>
	</body>
</html>
